<!--  -->
<template>
  <div class="customize-url" :style="{'margin-left': labelWidth}">
    <el-form :model="itemurlStatus">
      <el-form-item label="启用自定义URL">
        <el-switch v-model="itemurlStatus.isOpen" active-color="#13ce66">
        </el-switch>
        <el-tooltip class="item" effect="dark" content="启用自定义URL，可以独立设置该详情页面对外展示的URL，便于推广您的产品" placement="right">
          <i class="el-icon-question color-gray"></i>
        </el-tooltip>
      </el-form-item>
    </el-form>
    <el-form :model="pathInput" ref="itemCustomizeurl">
      <el-form-item label="请选择自定义链接模式：" class="item-block-u">
        <el-radio-group v-model="pathInput.pathstyle" class="radio-block-u">
          <el-radio size="mini" :label="1">
            <template>
              <span>{{customizeUrl.listHDomain&&customizeUrl.listHDomain.length > 0 ? customizeUrl.listHDomain[0].domainName : defaultdomain}}{{customizeUrl.lanno?customizeUrl.lanno:defaultlanno}}</span><span>/</span>&nbsp;
              <el-input size="small" style="width:200px;" v-model="pathInput.path1"></el-input>
              <span>{{customizeUrl.suffix}}</span>
            </template>
          </el-radio>
          <el-radio size="mini" :label="2" style="margin-bottom:0;">
            <template>
              <span>{{customizeUrl.listHDomain&&customizeUrl.listHDomain.length > 0 ? customizeUrl.listHDomain[0].domainName : defaultdomain}}{{customizeUrl.lanno?customizeUrl.lanno:defaultlanno}}</span><span>/</span>&nbsp;
              <el-select v-model="pathInput.path2.onepath" allow-create filterable default-first-option size="small" placeholder="请选择或填写" style="width:200px;margin-bottom:10px;">
                <el-option label="无" :value="-1" disabled v-if="customizeUrl.pathOneGroup && customizeUrl.pathOneGroup.length < 1"></el-option>
                <el-option
                  v-for="(item,index) in customizeUrl.pathOneGroup"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
              &nbsp;<span>/</span>&nbsp;
              <el-input size="small" style="width:200px;" v-model="pathInput.path2.twopath"></el-input>
              <span>{{customizeUrl.suffix}}</span>
            </template>
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    system: {
      type: Object
    },
    customizeUrl: {
      type: Object
    },
    pageTitle: {
      type: String,
      default: ''
    },
    pageid: {
      type: Number
    },
    labelWidth: {
      type: String,
      default: '130px'
    }
  },
  computed: {
    ...mapGetters([
      'currentSite',
      'alllanguage'
    ])
  },
  created () {
    this.$post('/domain/infos-list').then(response => {
      if (response && response.length > 0) {
        this.defaultdomain = response[0].domainName
      }
    })
    if (this.currentSite.config.isMain !== 1 && this.currentSite.language.lanNo !== '') {
      this.defaultlanno = '/' + this.currentSite.language.lanNo
    }
    this.itemurlStatus.isOpen = this.customizeUrl.status > 0
    if (this.customizeUrl.path) {
      if (this.customizeUrl.path.length === 1) {
        this.pathInput.pathstyle = 1
        this.pathInput.path1 = this.customizeUrl.path[0]
      } else if (this.customizeUrl.path.length === 2) {
        this.pathInput.pathstyle = 2
        this.pathInput.path2.onepath = this.customizeUrl.path[0]
        this.pathInput.path2.twopath = this.customizeUrl.path[1]
      }
    }
  },
  data () {
    return {
      defaultdomain: '',
      defaultlanno: '',
      itemurlStatus: {
        isOpen: false
      },
      pathInput: {
        pathstyle: 1,
        path1: '',
        path2: {
          onepath: '',
          twopath: ''
        }
      }
    }
  },
  watch: {
    pageTitle: {
      handler (newValue, oldValue) {
        if (this.pageid > 0) {
          return
        }
        if (newValue && this.itemurlStatus.isOpen && parseInt(this.pathInput.pathstyle) === 1) {
          let oldValueStr = oldValue.replace(/\s*/g, '')
          if (oldValueStr.indexOf(this.pathInput.path1) === 0) {
            this.pathInput.path1 = newValue.replace(/\s*/g, '')
          }
        }
      },
      deep: true
    }
  },
  methods: {
    customUrl () {
      let itemCustomLink = {}
      let bool = true
      let path = []
      let reg = RegExp(/^([\u4e00-\u9fa5]|[a-zA-Z])+([\u4e00-\u9fa5]|[a-zA-Z0-9]|-)*$/)
      if (this.itemurlStatus.isOpen) {
        if (parseInt(this.pathInput.pathstyle) === 1) {
          if (this.pathInput.path1 === '') {
            this.$message.error('自定义链接不能为空')
            bool = false
          } else {
            let lastChart = this.pathInput.path1.split('')[this.pathInput.path1.length - 1]
            if (lastChart === '-') {
              this.$message.error(this.pathInput.path1 + '错误，自定义链接不能以中横线结尾')
              bool = false
            } else if (!reg.test(this.pathInput.path1)) {
              this.$message.error(this.pathInput.path1 + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字开头，不能以中横线开头结尾')
              bool = false
            } else {
              path.push(this.pathInput.path1)
            }
          }
        } else if (parseInt(this.pathInput.pathstyle) === 2) {
          if (this.pathInput.path2.onepath === '' || this.pathInput.path2.twopath === '') {
            this.$message.error('自定义链接不能为空')
            bool = false
          } else {
            let lastChart1 = this.pathInput.path2.onepath.split('')[this.pathInput.path2.onepath.length - 1]
            let lastChart2 = this.pathInput.path2.twopath.split('')[this.pathInput.path2.twopath.length - 1]
            if (lastChart1 === '-') {
              this.$message.error(this.pathInput.path2.onepath + '错误，自定义链接不能以中横线结尾')
              bool = false
            } else if (lastChart2 === '-') {
              this.$message.error(this.pathInput.path2.twopath + '错误，自定义链接不能以中横线结尾')
              bool = false
            } else if (!reg.test(this.pathInput.path2.onepath)) {
              this.$message.error(this.pathInput.path2.onepath + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字、中横线开头')
              bool = false
            } else if (!reg.test(this.pathInput.path2.twopath)) {
              this.$message.error(this.pathInput.path2.twopath + '错误，自定义链接只能由中文、英文、数字、中横线组成，且每个链接路径不能以数字、中横线开头')
              bool = false
            } else {
              path.push(this.pathInput.path2.onepath)
              path.push(this.pathInput.path2.twopath)
            }
          }
        }
      } else {
        let lastChart0 = this.pathInput.path1.split('')[this.pathInput.path1.length - 1]
        let lastChart1 = this.pathInput.path2.onepath.split('')[this.pathInput.path2.onepath.length - 1]
        let lastChart2 = this.pathInput.path2.twopath.split('')[this.pathInput.path2.twopath.length - 1]
        if (parseInt(this.pathInput.pathstyle) === 1 && this.pathInput.path1 !== '' && lastChart0 !== '-' && reg.test(this.pathInput.path1)) {
          path.push(this.pathInput.path1)
        } else if (parseInt(this.pathInput.pathstyle) === 2 && this.pathInput.path2.onepath !== '' && lastChart1 !== '-' && reg.test(this.pathInput.path2.onepath) && this.pathInput.path2.twopath !== '' && lastChart2 !== '-' && reg.test(this.pathInput.path2.twopath)) {
          path.push(this.pathInput.path2.onepath)
          path.push(this.pathInput.path2.twopath)
        }
      }
      itemCustomLink = {
        path: path,
        status: this.itemurlStatus.isOpen ? 1 : 0,
        bool: bool
      }
      return itemCustomLink
    }
  }
}

</script>

<style scoped lang="scss">
.customize-url {
  padding-left: 17px;
  margin-bottom: 15px;
  border: 1px solid #DCDFE6;
  max-width: 800px;
  margin-left: 130px;
  /deep/ .el-form-item {
    margin-bottom: 10px;
  }
}
.color-gray{
  color: #999;
  vertical-align: middle;
  }
.span-u{
  padding-left: 10px;
}
.domainset-u{
  cursor: pointer;
  color: #258FFB;
}
.item-block-u /deep/ .el-form-item__label{
  float: none;
}
.radio-block-u /deep/ .el-radio{
  margin-bottom: 15px;
  display: block;
  .el-radio__label{
    white-space: normal;
    span{
      display: inline-block;
      line-height: 2;
    }
  }
}
</style>
